﻿@{
    ViewBag.Title = "Diseases";
}

<h2>Diseases</h2>

@(Html.Telerik().Chart()
    .Name("chart")
    .Theme("Vista")
    .Title("Disease Pattern Report")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Top)
    )
    .Series(series =>
    {
        series
            .Column(new int[] { 20, 40, 45, 30, 50 })
            .Stack(true)
            .Color("#13558E")
            .Name("Malaria");
        series
            .Column(new int[] { 20, 30, 35, 35, 40 })
            .Stack(true)
            .Color("#E21219")
            .Name("Thyphoid");
        series
            .Line(new double[] { 30, 38, 40, 32, 42 })
            .Name("Cholera")
            .Color("#DE7E42")
            .Axis("mpg");
        series
            .Line(new double[] { 7.8, 6.2, 5.9, 7.4, 5.6 })
            .Name("Yellow Fever")
            .Color("#057589")
            .Axis("l100km");
    })
    .CategoryAxis(axis => axis
        .Categories("Jan", "Feb", "Mar", "Apr", "May")
        // Align the first two value axes to the left
        // and the last two to the right.
        //
        // Right alignment is done by specifying a
        // crossing value greater than or equal to
        // the number of categories.
        .AxisCrossingValue(0, 0, 100, 100)
    )
    .ValueAxis(axis => axis
        .Numeric()
            .Title("Out Patients")
            .Min(0).Max(100)
    )
    .ValueAxis(axis => axis
        .Numeric("km")
            .Title("In Patients")
            .Min(0).Max(161).MajorUnit(32)
    )
    .ValueAxis(axis => axis
        .Numeric("mpg")
            .Title("Mortality Rate")
            .Color("#DE7E42")
    )
    .ValueAxis(axis => axis
        .Numeric("l100km")
            .Title("Fatality Rate")
            .Color("#057589")
    )
    .HtmlAttributes(new { style = "width: 670px; height: 400px; margin: auto;" })
)
